<template>
	<view class="shop-container">
		<!-- 搜索区域 -->
		<view class="search-section">
			<view class="search-box">
				<uni-icons type="search" size="20" color="#999"></uni-icons>
				<input 
					type="text" 
					v-model="searchKeyword"
					placeholder="请输入药品名称"
					@input="handleSearch"
				/>
				<uni-icons 
					v-if="searchKeyword"
					type="clear" 
					size="20" 
					color="#999"
					@click="clearSearch"
				></uni-icons>
			</view>
		</view>

		<!-- 药品列表 -->
		<view class="medicine-list">
			<view 
				class="medicine-item" 
				v-for="(item, index) in filteredMedicineList" 
				:key="index"
				@click="navigateToDetail(item.id)"
			>
				<!-- 商品图片 -->
				<view class="medicine-image">
					<view class="image-placeholder"></view>
				</view>
				
				<!-- 商品信息 -->
				<view class="medicine-info">
					<text class="medicine-name">{{item.name}}</text>
					<view class="medicine-price">
						<text class="price">¥{{item.price}}</text>
						<text class="stock">库存：{{item.stock}}件</text>
					</view>
					
					<!-- 加入购物车按钮 -->
					<button 
						class="add-cart-btn" 
						size="mini" 
						type="primary"
						@click.stop="addToCart(item)"
					>加入购物车</button>
				</view>
			</view>
		</view>

		<!-- 空状态提示 -->
		<view class="empty-tip" v-if="searchKeyword && filteredMedicineList.length === 0">
			<uni-icons type="info" size="40" color="#999"></uni-icons>
			<text>未找到相关药品</text>
		</view>

		<!-- 购物车按钮 -->
		<view class="cart-btn" @click="navigateToCart">
			<uni-icons type="cart" size="30" color="#ffffff"></uni-icons>
			<text class="cart-badge" v-if="cartCount > 0">{{cartCount}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '', // 搜索关键词
				cartCount: 0, // 购物车商品数量
				medicineList: [{
					id: 1,
					name: '布洛芬胶囊',
					price: 25.8,
					stock: 100
				}, {
					id: 2,
					name: '感冒灵颗粒',
					price: 32.5,
					stock: 85
				}, {
					id: 3,
					name: '板蓝根冲剂',
					price: 15.9,
					stock: 150
				}, {
					id: 4,
					name: '维生素C片',
					price: 45.0,
					stock: 200
				}, {
					id: 5,
					name: '阿司匹林',
					price: 12.8,
					stock: 120
				}, {
					id: 6,
					name: '复方感冒片',
					price: 28.5,
					stock: 90
				}]
			}
		},
		computed: {
			// 过滤后的药品列表
			filteredMedicineList() {
				if (!this.searchKeyword) return this.medicineList;
				const keyword = this.searchKeyword.toLowerCase();
				return this.medicineList.filter(item => 
					item.name.toLowerCase().includes(keyword)
				);
			}
		},
		methods: {
			// 处理搜索
			handleSearch() {
				// 可以在这里添加防抖逻辑
			},
			// 清除搜索
			clearSearch() {
				this.searchKeyword = '';
			},
			// 跳转到详情页
			navigateToDetail(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				});
			},
			// 加入购物车
			addToCart(item) {
				this.cartCount++; // 增加购物车数量
				uni.showToast({
					title: '已加入购物车',
					icon: 'success'
				});
			},
			// 跳转到购物车页面
			navigateToCart() {
				uni.navigateTo({
					url: '/pages/cart/cart'
				});
			}
		}
	}
</script>

<style lang="scss">
.shop-container {
	padding: 20rpx;
	padding-top: 120rpx; // 为搜索区域预留空间
	background-color: #f5f5f5;
	min-height: 100vh;
	box-sizing: border-box;
}

// 搜索区域样式
.search-section {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 20rpx;
	background-color: #f5f5f5;
	z-index: 100;
	
	.search-box {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		border-radius: 32rpx;
		padding: 0 20rpx;
		height: 64rpx;
		
		uni-icons {
			margin-right: 10rpx;
		}
		
		input {
			flex: 1;
			height: 100%;
			font-size: 28rpx;
		}
	}
}

// 空状态提示样式
.empty-tip {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 200rpx;
	color: #999;
	font-size: 28rpx;
	
	uni-icons {
		margin-bottom: 20rpx;
	}
}

.medicine-list {
	display: flex;
	flex-wrap: wrap;
	margin: -10rpx;
	
	.medicine-item {
		width: calc(50% - 20rpx);
		background-color: #ffffff;
		border-radius: 16rpx;
		margin: 10rpx;
		padding: 16rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
		
		.medicine-image {
			width: 100%;
			height: 260rpx;
			margin-bottom: 16rpx;
			
			.image-placeholder {
				width: 100%;
				height: 100%;
				background-color: #f0f0f0;
				border-radius: 8rpx;
			}
		}
		
		.medicine-info {
			.medicine-name {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 12rpx;
				display: block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			
			.medicine-price {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 12rpx;
				
				.price {
					font-size: 32rpx;
					color: #ff6b6b;
					font-weight: bold;
				}
				
				.stock {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.add-cart-btn {
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 26rpx;
				background-color: #2ac2d1;
				color: #ffffff;
				padding: 0;
				
				&::after {
					border: none;
				}
			}
		}
	}
}

// 购物车按钮样式
.cart-btn {
	position: fixed;
	right: 30rpx;
	bottom: 50rpx;
	width: 100rpx;
	height: 100rpx;
	background-color: #2ac2d1;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
	z-index: 100;
	
	.cart-badge {
		position: absolute;
		top: -6rpx;
		right: -6rpx;
		background-color: #ff6b6b;
		color: #ffffff;
		font-size: 24rpx;
		min-width: 32rpx;
		height: 32rpx;
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 6rpx;
	}
}
</style>
